<%@page import="com.axonactive.yolo.domain.UserEmail"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@page import="com.axonactive.yolo.util.session.SessionHelper"%>
<%
UserEmail userEmail=SessionHelper.getUserEmail(session);
String currencyCode = SessionHelper.getCurrencyCode(session).toString().trim();
if(currencyCode==null) currencyCode = "USD";
%>

					<div class="row full-width">
                        <div class="columns">
                            <!-- <div class="columns"> -->
							<form:form method="POST" name="create" modelAttribute="parameters" id="form-abide"
								action="${pageContext.request.contextPath}/task/create.html">
								<!-- error div -->
								<c:if test="${not empty message}">
									<div class="row">
										<div class="large-12 large-centered columns margin-15px-top">
											<div data-alert class="alert-box alert radius">
												<b>${message}</b>
												<a href="#" class="close">&times;</a>
											</div>
										</div>
									</div>
								</c:if>
								<div class="row">
									<div class="large-12 medium-14 large-centered medium-centered columns margin-15px-top">
										<form:errors path="*" element="div" cssClass="alert-box alert radius" id="alert"/>
									</div>
								</div>
                            <div class="large-12 medium-14 small-16 large-centered medium-centered small-centered columns bg-light-blue">
                                <!--content-->
                                <!-- <div class="large-12 large-centered medium-14 medium-centered small-16 columns bg-light-blue"> -->
									<div class="row">
										<div class="large-16 columns">
											<div class="large-8 columns">
												<h6 class="blue"><b>CREATE NEW TASK</b></h6>
											</div>
										</div>
									</div>
                                    <!-- row 1  -->
                                    <div class="row">
										<div class="large-16 columns">
											<!-- column 1 -->
											<div class="large-7 columns">
												<div class="row collapse">
													<div class="columns label-prefix">
														<label class="prefix">Name</label>
													</div>
													<div class="columns input-after-prefix">
														<input type="text" name="taskName" value="${parameters.taskName}" class="border-blue" required>
														<small class="error">Field is required.</small>
													</div>
												</div>
											</div>
											<!-- column 2 -->
											<div class="large-2 columns">

											</div>
											<!-- column 3 -->
											<div class="large-7 columns">
												<div class="large-8 medium-8 columns un-padding">
													<input id="RoundTripRadio" type="radio" name="typeOfTrip" class="radioBtn"
														value="roundTrip" ${parameters.typeOfTrip!='oneWay'?'checked':''}
														required> <label for="typeOfTrip" class="error">
															<h6 id="roundtrip" onclick="selectTypeOfTrip(this)" class="blue"><b>ROUND-TRIP</b></h6></label>
												</div>
												<div class="large-8 medium-8 columns un-padding">
													<input id="OneWayRadio" type="radio" name="typeOfTrip" class="radioBtn"
														value="oneWay" ${parameters.typeOfTrip=='oneWay'?'checked':''} 
														required> <label for="typeOfTrip" class="error">
														<h6 id="oneway" class="blue" onclick="selectTypeOfTrip(this)">
															<b>ONE-WAY</b>
														</h6>
														</label>
												</div>
											</div>
										</div>
                                    </div>

                                    <!-- row 2.1  -->
                                    <div class="row">
										<div class="large-16 columns">

											<div class="large-7 columns margin-14px-bot">
												<div class="row collapse">
													<div class="columns label-prefix">
														<label class="prefix">From</label>
													</div>
													<div class="columns input-after-prefix">
														<input type="text" class="border-blue"
															required id="fromInput" name="fromLocation"> <small
															class="error">Field is required.</small>
													</div>
												</div>
											</div>

											<!-- <div class="show-for-large-up"> -->
											<div class="large-2 medium-16 small-16 columns margin-14px-bot">
												<div align="center">
													<a id="switch_location"> <img
														src="<c:url value="/resources/img/ic_switch_location.png"/>">
													</a>
												</div>
											</div>
											<!-- </div> -->


											<div class="large-7 columns margin-14px-bot">
												<div class="row collapse">
													<div class="columns label-prefix">
														<label class="prefix">To</label>
													</div>
													<div class="columns input-after-prefix">
														<input type="text" class="border-blue"
															required id="toInput"
															name="toLocation"> <small class="error">Field
															is required.</small>
													</div>
												</div>
											</div>
										</div>

									</div>
                                    <!-- row 2.2  -->


                                    <!-- row 3  -->
                                    <div class="row collapse">

                                        <div class="large-7 columns">

											<div class="large-8 medium-8 columns margin-14px-bot">
												<div class="row date collapse">
													<div class="columns label-prefix">
														<label class="prefix">Depart</label>
													</div>
													<div class="columns input-after-prefix">
														<input id="dpd1" class="border-blue" type="text" value="${parameters.outBound }"
															name="outBound" data-date-format="yyyy/mm/dd" readonly
															required> <small class="error">Field is
															required.</small>
													</div>
												</div>
											</div>

											<div class="large-8 medium-8 columns margin-14px-bot" id="lbReturn">
												<div class="row date collapse">
													<div class="columns label-prefix">
														<label class="prefix">Return</label>
													</div>
													<div class="columns input-after-prefix" id="returnField">
														<input id="dpd2" class="border-blue" type="text"
														name="inBound" value="${parameters.inBound }"
															data-date-format="yyyy/mm/dd" readonly required> <small
															class="error">Field is required.</small>
													</div>
												</div>
											</div>

										</div>

                                        <!-- <div class="show-for-large-up"> -->
                                        <div class="large-2 columns">
                                        </div>
                                        <!-- </div> -->

                                        <div class="large-7 medium-16 columns">

                                            <div class="large-8 medium-8 columns">
                                                <div class="row collapse">
                                                    <div class="columns label-prefix">
                                                        <span title="-/+ days">
																	<label class="prefix">
																	Flexible
																	</label>
																</span>
                                                    </div>
                                                    <div class="columns input-after-prefix">

                                                        <select class="border-blue" name="flexibleDays">
                                                            <option value="0" ${parameters.flexibleDays == '0' ? 'selected':''}>0</option>
                                                            <option value="1" ${parameters.flexibleDays == '1' ? 'selected':''}>1</option>
                                                            <option value="2" ${parameters.flexibleDays == '2' ? 'selected':''}>2</option>
                                                            <option value="3" ${parameters.flexibleDays == '3' ? 'selected':''}>3</option>
                                                        </select>

                                                    </div>

                                                </div>
                                            </div>

                                            <div class="large-8 medium-8 columns margin-14px-bot">
                                                <div class="row collapse">
                                                    <div class="columns label-prefix">
														<label class="prefix">Max Price</label>
                                                    </div>
                                                    <div class="columns task-max-price">
                                                        <input type="number" class="border-blue" name="maxPrice" id="maxPrice"
                                                        value="${parameters.maxPrice}" >
                                                        <small class="error">Invalid number.</small>
                                                    </div>
													<div class="columns task-currency">
														<label class="postfix"><%=currencyCode%></label>
														<input id="currency" name="currencyCode" type="hidden" value="<%=currencyCode%>">
													</div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                    <!-- row 4  -->
                                    <div class="row collapse">
                                        <div class="large-7 medium-16 columns">
                                            <div class="large-8 medium-8 columns">
                                                <div class="row collapse">
                                                    <div class="columns label-prefix">
                                                        <label class="prefix">Class</label>
                                                    </div>
                                                    <div class="columns input-after-prefix">
                                                        <select class="border-blue" name="cabinClass">
                                                            <option value="0" ${parameters.cabinClass == '0' ? 'selected':''}>Economy</option>
															<option value="1" ${parameters.cabinClass == '1' ? 'selected':''}>Business</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="large-8 medium-8 columns">
                                                <div class="row collapse">
                                                    <div class="columns label-prefix">
                                                        <label class="prefix">Stop(s)</label>
                                                    </div>
                                                    <div class="columns input-after-prefix">
                                                        <select class="border-blue" name="numStop">
                                                            <option value="0" ${parameters.numStop == 0 ? 'selected':''}>0</option>
                                                            <option value="1" ${parameters.numStop == 1 ? 'selected':''}>1</option>
                                                            <option value="2" ${parameters.numStop == 2 ? 'selected':''}>Any</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- <div class="show-for-large-up"> -->
                                        <div class="large-2 medium-2 columns">

                                        </div>
                                        <!-- </div> -->
										<div class="large-7 columns">
                                            <div class="large-16 medium-16 columns">
                                                <div class="row collapse">
													<div class="columns label-prefix">
														<label class="prefix">Airlines</label>
													</div>
													<div class="columns input-after-prefix">
														<input id="input_autocomplete_airline"
															type="text" name="airlines" class="border-blue"/>
													</div>
												</div>
                                            </div>
                                        </div>
									</div>

                                    <!-- row 5  -->
                                    <div class="row">
                                        <div class="columns">
                                            <div class="large-7 columns">

                                            </div>
                                            <div class="large-2 columns">
                                            </div>
                                            <div class="large-7 columns">
                                                <button type="submit" class="small create-task button expand right loading_controller_group">
                                                    <img src="<c:url value="/resources/img/ic_task.png"/>" class="margin-5px-right">Create New Task
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- </div> -->

                                <!-- end content -->

                            </div>
							</form:form>
                            <!-- </div> -->
                        </div>
                    </div>
                    <script>
                    	$("#form-abide").attr('data-abide', '');
                    </script>